<template>
  <div>
    <MyTable :data="list">
      <!-- 3. 通过template #插槽名="变量名" 接收 -->
      <template #default="obj">
        <button @click="del(obj.row.id)">
          删除
        </button>
      </template>
    </MyTable>
    
    <MyTable :data="list2">
      <template #default="{ row }">
        <button @click="show(row)">查看</button>
      </template>
    </MyTable>
    <!-- 插槽-作用域插槽
    作用域插槽：定义slot插槽的同时，是可以传值的，给插槽上可以绑定数据，将来使用组件时可以用
    场景：封装表格组件
    1.父传子，动态渲染表格内容
    2.利用默认插槽，定制操作列
    3.删除或查看都需要用到当前项的id，属于组件内部的数据，通过作用域插槽传值绑定，进而使用
    基本使用步骤：
    1.给slot标签，以添加属性的方式传值
    <slot :id="item.id" msg="测试文本"></slot>
    2.所有添加的属性，都会被收集到一个对象中
    {id:3, msg: '测试文本'}
    3.在template中，通过`#插槽名=“obj”`接收，默认插槽名为default
    <MyTable :data="list">
      <template #default="obj">
        <button @click="del(obj.row.id)">
          删除
        </button>
      </template>
    </MyTable> -->
  </div>
</template>

<script>
import MyTable from './components/MyTable.vue'
export default {
  data () {
    return {
      list: [
        { id: 1, name: '张小花', age: 18 },
        { id: 2, name: '孙大明', age: 19 },
        { id: 3, name: '刘德忠', age: 17 },
      ],
      list2: [
        { id: 1, name: '赵小云', age: 18 },
        { id: 2, name: '刘蓓蓓', age: 19 },
        { id: 3, name: '姜肖泰', age: 17 },
      ]
    }
  },
  methods: {
    del (id) {
      this.list = this.list.filter(item => item.id !== id)
    },
    show (row) {
      // console.log(row);
      alert(`姓名：${row.name}; 年纪：${row.age}`)
    }
  },
  components: {
    MyTable
  }
}
</script>
